<template>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>评论管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-select
      v-model="filter"
      placeholder="根据状态查看"
      clearable
      @change="getCommonBystate"
      @clear="getCommonList()"
    >
      <el-option label="已通过" value="1"></el-option>
      <el-option label="待审核" value="-1"></el-option>
    </el-select>
    <el-table :data="commonList" border style="width: 100%" stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="评论者" prop="userName"></el-table-column>
      <el-table-column label="评论内容" prop="commonb"></el-table-column>
      <el-table-column label="评论在" prop="title"></el-table-column>
      <el-table-column label="提交于" prop="time"></el-table-column>
      <el-table-column label="状态" prop="cstate">
        <template slot-scope="scope">
          <p v-if="scope.row.cstate==-1">待审核</p>
          <p v-if="scope.row.cstate==1">已通过</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="notCommon(scope.row)"
            v-if="scope.row.cstate==1"
          >驳回</el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            @click="notCommon(scope.row)"
            v-if="scope.row.cstate==-1"
          >通过</el-button>
          <el-button
            type="warning"
            icon="el-icon-delete"
            size="mini"
            @click="deleteCommon(scope.row.commonId)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script>
export default {
  data () {
    return {
      // 评论列表
      commonList: [],
      // 筛选
      filter: ''
    }
  },
  created () {
    this.getCommonList()
  },
  methods: {
    // 获取评论列表
    async getCommonList () {
      const { data: res } = await this.$http.get('api/common')
      this.commonList = res.Table
      console.log(res)
    },
    // 评论状态取反
    async notCommon (row) {
      await this.$http.get('api/common', {
        params: {
          commonId: row.commonId,
          cstate: -row.cstate
        }
      })
      this.$message.success('状态修改成功')
      this.getCommonList()
    },
    // 根据状态查看评论列表
    async getCommonBystate () {
      const { data: res } = await this.$http.get('api/common', {
        params: {
          cstate: this.filter
        }
      })
      this.commonList = res.Table
    },
    async deleteCommon () {
      const removeNewsById = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (removeNewsById !== 'confirm') {
        return this.$message.info('取消了删除')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.el-select {
  margin: 20px 0;
}
</style>
